1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<script>
import Account from './_account.svelte';
import Pos from './_pos.svelte';
import Security from './_security.svelte';
import { AppHeader, Icon } from '$comp';
import { t } from '$lib/translations';
import { failure, success, put } from '$lib/utils';
import { user, avatarUpload, bannerUpload } from '$lib/store';
import { upload } from '$lib/upload';
let tab = 'account';
let tabs = [
{ name: 'account', key: 'ACCOUNT', comp: Account },
{ name: 'pos', key: 'POINT_OF_SALE', comp: Pos },
{ name: 'security', key: 'SECURITY', comp: Security }
];
$: ({ comp } = tabs.find((t) => t.name === tab));
let save = async () => {
try {
await put('/user', $user);
if ($avatarUpload) {
await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress);
}
if ($bannerUpload) {
await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress);
}
success('Settings saved');
} catch (e) {
failure('Something went wrong');
}
};
</script>
<AppHeader />
<form on:submit|preventDefault={save} class="mb-28">
<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
{$t('user.settings.header')}
</h1>
<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
{#each tabs as { name, key }}
<button class:text-black={tab === name} on:click|preventDefault={() => (tab = name)}
>{$t(`user.settings.${key}`)}</button
>
{/each}
</div>
<svelte:component this={comp} />
</div>
<div class="z-10 fixed bottom-0 bg-white shadow border w-full">
<button type="submit" class="primary">
<Icon icon="save" style="mr-1" />
<div class="my-auto">Save Settings</div>
</button>
</div>
</form>
|
